<script setup lang='ts'>
import { Banner } from '@/api/model/Banner';

const props = defineProps({
    data: {
        type: Array<Banner>,
        default: () => []
    }
});
/*跳转*/
const gotoBannerPath = (banner: Banner) => {
    if (!banner.isLink) return;
    const path = banner.path;
    window.open(path, '_blank');
};
</script>

<template>
    <el-carousel trigger='click' height='150px'>
        <template v-if='props.data?.length'>
            <el-carousel-item :class='{
                pointer:banner.isLink
            }' v-for='banner in props.data' :key='banner.bannerId'>
                <img :src='`/api${banner.image}`' class='banner-img' alt='banner-img' @click='gotoBannerPath(banner)'>
            </el-carousel-item>
        </template>
        <el-carousel-item v-else>
            <img class='banner-img' src='@/assets/images/login-background.jpg' alt='banner-img'>
        </el-carousel-item>
    </el-carousel>
</template>

<style lang='scss'>
.pointer {
    cursor: pointer;
}

.el-carousel, .el-carousel__item, .el-carousel__container {
    background-color: #a7a7a7;
    height: 300px !important;
    overflow: hidden;

    .banner-img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}
</style>
